<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/Font-Awesome-master/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/base.css?v={$version}">
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
    <script src="/js/jquery-2.1.1.min.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/plug/UEditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/plug/UEditor/ueditor.all.js"></script>
    <style>
        .grid {
            padding: 4px;
        }

        .grid li {
            width: 28px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            border-top-color: rgb(230, 230, 230);
            border-right-color: rgb(230, 230, 230);
            border-bottom-color: rgb(230, 230, 230);
            border-left-color: rgb(230, 230, 230);
            margin: 4px;
            text-align: center;
            border-radius: 1px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            float: left;
            list-style: none;
        }

        .grid li:hover {
            background: #1E9FFF;
            color: #fff;
            border-color: #1E9FFF;
        }

        .sizing {
            display: none;
            position: absolute;
            left: 0;
            top: 37px;
            width: 100%;
            background: #fff;
            border: 1px solid #D2D2D2;
            border-radius: 0 0 2px 2px;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            height: 246px;
            overflow: auto;
            z-index: 10;
        }

        .icon_search {
            margin: 8px 8px 0;
        }

        #js_div {
            display: none;
            border: 1px solid #d7d7d7;
            position: absolute;
            width: 360px;
            height: 260px;
            background: #fff;
            z-index: 9999;
            text-align: center;
            line-height: 30px;
            top: 50%;
            margin-top: -150px;
            left: 50%;
            margin-left: -200px;
            padding: 20px;
        }
    </style>
</head>

<body>

    <div class="layui-form" style="padding: 20px 0 0 0;">
        <input type="hidden" name="id" value="{$data.id}">
        <div id="js_div" style="">
            <div style="font-size:25px;line-height:80px;">
                结算金额
            </div>
            <div class="" style="text-align:left;line-height:40px;">
                输入结算金额
            </div>
            <div>
                <input type="text" autocomplete="off" class="layui-input" value="" id="js_val">
            </div>
            <div class="" style="text-align:left;line-height:40px;">
                未结清金额：{:round($data.wjq_money,2)}
            </div>
            <div>
                <button type="button" class="layui-btn layui-btn-primary" id="js_cancel">取消</button>
                <button type="button" class="layui-btn layui-btn-normal" id="js_confirm">确认</button>
            </div>
        </div>

        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">订单号</label>
            <div class="layui-input-inline flex-col-md-7">
                <input disabled type="text" autocomplete="off" class="layui-input" value="{$data.order_no}">
            </div>
        </div>
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">下单时间</label>
            <div class="layui-input-inline flex-col-md-7">
                <input disabled type="text" autocomplete="off" class="layui-input" value="{$data.create_time}">
            </div>
        </div>
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">支付方式</label>
            <div class="layui-input-inline flex-col-md-7">
                <input disabled type="text" autocomplete="off" class="layui-input" {if $data.type==1} value="微信支付"
                    {else} value="货到付款" {/if}>
            </div>
        </div>
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">订单金额</label>
            <div class="layui-input-inline flex-col-md-7">
                <input disabled type="text" autocomplete="off" class="layui-input" value="{$data.y_price}">
            </div>
        </div>
        {if $data.type == 2 && $data.status == 4}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">未结清金额</label>
            <div class="layui-input-inline flex-col-md-7 input-tag">
                <input disabled type="text" autocomplete="off" class="layui-input" value="{:round($data.wjq_money,2)}">
                <button type="button" class="layui-btn layui-btn-normal" id="js_data">结算</button>
            </div>
            <!-- <div class="layui-input-inline flex-col-md-7" style="width:0px">
                
            </div> -->
        </div>
        {/if}
        {if ($data.log && $data.type == 2 && $data.status == 4) || ($data.type == 2 && $data.status == 6)}
        <div style="margin-bottom:15px;">
            <div style="text-align:center">
                操作结算记录
            </div>
            {foreach $data.log as $vv}
            <div style="padding-left:40px;">
                {$vv.create_time}
            </div>
            <div style="padding-left:40px;">
                {if empty($vv.user)}
                用户一次性结清了{$vv.money}元
                {else}
                “{$vv.user.name}” 操作结算了{$vv.money}元
                {/if}
            </div>
            {/foreach}
        </div>
        {/if}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">订单状态</label>
            <div class="layui-input-inline flex-col-md-7">
                <input disabled type="text" autocomplete="off" class="layui-input" {if $data.status==1} value="待支付"
                    {elseif $data.status==2} value="待发货" {elseif $data.status==3} value="待收货" {elseif $data.status==4}
                    value="未结算" {elseif $data.status==5} value="结算申请中" {elseif $data.status==6} value="已完成" {elseif
                    $data.status==7} value="取消" {/if}>
            </div>
        </div>
        {if $data.status == 2}
        <div class="layui-form-item page-row">
            <label class="layui-form-label flex-col-md-3">发货：</label>
            <div class="layui-input-inline flex-col-md-7">
                <input type="radio" name="status" value="2" title="待发货" checked>
                <input type="radio" name="status" value="3" title="发货">
            </div>
        </div>
        {/if}
        <div class="layui-form-item page-row" top>
            <label class="layui-form-label flex-col-md-3">产品</label>
            {foreach $data['order_detailed'] as $v}
            <div class="layui-input-block flex-col-md-7" style="padding-top: 10px;">
                <div style="float: left;">
                    <a href="{$v.product.images[0]??''}" target="_blank"><img src="{$v.product.images[0]??''}" alt="图片"
                            style="max-height: 100px;"></a>
                </div>
                <div style="float: left;width: 30%;padding:20px;">
                    <div style="padding: 5px;">
                        <div style="float: left">{$v.product.name}</div>
                        <div style="float: right">¥{$v.price}</div>
                        <div style="clear: both;"></div>
                    </div>
                    <div style="padding: 5px;">
                        <div style="float: left">{$v.gg_name}</div>
                        <div style="float: right">×{$v.num}</div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
            {/foreach}
        </div>
        <div class="layui-form-item page-row" top>
            <label class="layui-form-label flex-col-md-3">收货信息</label>
            <div class="layui-input-block flex-col-md-7">
                <div style="padding:5px;">地区：{$data.address.city}</div>
                <div style="padding:5px;">乡镇：{$data.address.z.name}-{$data.address.c.name}</div>
                <div style="padding:5px;">收货人：{$data.address.name}</div>
                <div style="padding:5px;">联系电话：{$data.address.tel}</div>
                <div style="padding:5px;">收货地址：{$data.address.address}</div>
            </div>
        </div>
        <div class="layui-form-item page-row" top>
            <label class="layui-form-label flex-col-md-3">留言</label>
            <div class="layui-input-inline flex-col-md-7">
                <textarea disabled >{$data.content}</textarea>
            </div>
        </div>
        <div class="layui-form-item page-row layui-hide">
            <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
        </div>
    </div>

    <script>
        layui.config({
            base: '/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form', 'upload', 'layer', 'layedit'], function () {
            var $ = layui.$
                , form = layui.form
                , upload = layui.upload
                , layedit = layui.layedit;
            "{foreach $input as $v}"
            "{if $v.type == 'icon'}"
            $('.icon_select_action').click(function () {
                if ($(".sizing").css('display') == 'block') {
                    $(".sizing").hide();
                    $(this).html('搜索图标');
                    return false;
                } else {
                    $('.sizing').show();
                }
                $(this).html('关闭图标');
                var len = $(".loadding").show().find('li').length;
                if (len <= 0) {
                    $.ajax({
                        url: "{:url('api/getAwesome')}",
                        success: function (res) {
                            var data = res.data;
                            var html = '<div class="icon_search"><input placeholder="输入关键词搜索" class="layui-input icon_search_input"></div><ul class="grid">';
                            for (i in data) {
                                html += '<li><i class="fa ' + data[i] + '" aria-hidden="true"></i></li>';
                            }
                            html += '</ul>';
                            $('.loading').html(html);
                        }
                    })
                }
            })
            $('body').on('click', ".{$v.key}_icon" + ' .grid li', function () {
                var className = $(this).find('i').attr('class');
                console.log(className);
                $(this).closest('.layui-input-inline flex-col-md-7').find('input').val(className);
                $(this).closest('.layui-input-inline flex-col-md-7').find('.sizing').hide();
                $(this).closest('.layui-input-inline flex-col-md-7').find('.icon_select_action').html('搜索图标');
            })
            "{elseif $v.type == 'image'}"
            /*accepMime  设置的类型可以参考W3C：  https://www.w3school.com.cn/media/media_mimeref.asp */
            upload.render({
                elem: '#layuiadmin-upload-' + "{$v.key}"
                , url: "{:url('file')}"
                , accept: 'images'
                , method: 'post'
                , acceptMime: 'image/*'
                , done: function (res) {
                    if (res.code == 200) {
                        layer.msg('上传成功');
                        $(this.item).prev("div").children("input").eq(0).val(res.data.name + '.' + res.data.ext)
                        $(this.item).prev("div").find("input").eq(1).val(res.data.id);
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
            "{elseif $v.type == 'file'}"
            /*accepMime  设置的类型可以参考W3C：  https://www.w3school.com.cn/media/media_mimeref.asp */
            upload.render({
                elem: '#layuiadmin-upload-' + "{$v.key}"
                , url: "{:url('file')}"
                , accept: 'file'
                , method: 'post'
                , done: function (res) {
                    if (res.code == 200) {
                        layer.msg('上传成功');
                        $(this.item).prev("div").children("input").eq(0).val(res.data.name + '.' + res.data.ext)
                        $(this.item).prev("div").find("input").eq(1).val(res.data.id);
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
            "{/if}"
            "{/foreach}"
            //自定义验证
            form.verify({
                nickname: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                }
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]

                //确认密码
                , repass: function (value) {
                    if (value !== $('#LAY_password').val()) {
                        return '两次密码输入不一致';
                    }
                }
            });
            $('body').on('keyup', '.icon_search_input', function () {
                var keyword = $.trim($(this).val());
                if (!keyword) {
                    $(this).closest('.icon_select_options').find('li').show();
                } else {
                    $(this).closest('.icon_select_options').find('li').each(function () {
                        var className = $(this).find('i').attr('class');
                        if (className.indexOf(keyword) >= 0) {
                            $(this).show()
                        } else {
                            $(this).hide()
                        }
                    })
                }
            })
            $("#js_data").on('click', function (res) {
                console.log(123);
                $("#js_div").show();
            })
            $("#js_cancel").on('click', function (res) {
                //取消按钮
                $("#js_div").hide();
            })
            $("#js_confirm").on('click', function (res) {
                //确认按钮
                let val = $("#js_val").val();
                if (val * 1 > 0) {
                    $.ajax({
                        url: "{:url('order_jq_log/add')}",
                        method: 'POST',
                        data: { order_id: "{$data.id}", money: val },
                        success: function (res) {
                            console.log(res);
                            if (res.code == 200) {
                                layer.msg('结算成功', {
                                    icon: 1,
                                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                }, function () {
                                    history.go(0);
                                })
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    })
                } else {
                    layer.msg('不能小于等于0');
                }
                $("#js_div").hide();
            })

        })
    </script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        "{foreach $input as $v}"
        "{if $v['type'] == 'content'}"
        "{if isset($v.readonly)}"
        var ue = UE.getEditor('content_' + "{$v['key']}", {
            initialFrameHeight: 400,
            readonly: true,
        })

        "{else}"
        UE.getEditor('content_' + "{$v['key']}", {
            initialFrameHeight: 400
        }).ready(function () {
            UE.getEditor('content_' + "{$v['key']}").addListener('contentChange', function () {
                var html = UE.getEditor('content_' + "{$v['key']}").getContent();
                $("#content_val_" + "{$v['key']}").val(html);
            })
        });
        "{/if}"
        "{/if}"
        "{/foreach}"

    </script>
    <script>

    </script>
</body>

</html>